<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
    html,
    body {
        height: 100%;
    }
    
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #22c3aa; */
    }
    
    .box {
        min-height: 230px;
        width: 40%;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        padding: 30px;
        box-sizing: border-box;
        font-size: 22px;
        color: #fff;
        overflow: hidden;
        transition: 0.2s;
    }
    
    .author {
        text-align: right;
    }
    
    .btns {
        display: flex;
        justify-content: flex-end;
    }
    
    .btn-share {
        width: 30px;
        height: 30px;
        background-size: cover;
        border: none;
        margin: 0 5px;
    }
    
    .btn-share.qq {
        background-image: url('qq.png');
    }
    
    .btn-share.weibo {
        background-image: url('weibo.png');
    }
    
    .next {
        text-align: center;
    }
    
    .btn-next {
        width: 120px;
        height: 35px;
        /* background-color: #6495ED; */
        color: #fff;
        font-size: 20px;
        border: none;
        outline: none;
        cursor: pointer;
        transition: 0.2s;
    }
    
    .btn-next:hover {
        background-color: #ABCDEF;
        transition: 0.2s;
    }
    </style>
</head>

<body>
    <div class="box">
        <span class="content"></span>
        <p class="author"></p>
        <div class="next">
            <button class="btn-next">One</button>
        </div>
        <div class="btns">
            <a href="#" class="btn-share qq"></a>
            <a href="#" class="btn-share weibo"></a>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src="jquery.color.js"></script>
    <script>
    var getQuote = function() {
        var content = "";
        var author = "";
        var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
        var color = Math.floor(Math.random() * colors.length);
        $.getJSON('https://sslapi.hitokoto.cn/?&encode=json', function(json) {
                content = json["hitokoto"];
                author = json["from"];
                $(".content").html(content);
                $(".author").html("——" + author);
                $('body,.btn-next').animate({
                    backgroundColor: colors[color]
                }, 150);
                $('.content,.author').animate({
                    color: colors[color]
                }, 150);
                $(".weibo").click(function() {
                    window.open('http://service.weibo.com/share/share.php?url=&title=' + content + '——' + author + '');
                })
                $(".qq").click(function() {
                    window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.baidu.com&desc=' + content + '——' + author + '&title=吟游佳句&summary=我发现了一句很漂亮的话，快来看看吧&pics=&site=bshare');
                })
            })
            // $.ajax({
            //     url: 'https://sslapi.hitokoto.cn/?c=d&encode=json',
            //     success: function(data) {
            //         console.log(data);
            //         data = JSON.parse(data);
            //         content = data.hitokoto;
            //         author = data.from;
            //         $(".content").html(content);
            //         $(".author").html("——" + author);
            //     },
            // });

    }
    $(function() {
        getQuote();
        $(".btn-next").click(function() {
            getQuote();
            $('#new-quote').on('click', getQuote);
        });

    });
    </script>
</body>

</html>
